<script setup>
import { useSlots, ref } from "vue"
import { baseRequest } from "@/utils/request";
const request = (url, ...arg) => baseRequest(`${url}`, ...arg);

defineOptions({
    inheritAttrs: false
})
let props = defineProps({
    params: {},
    url: {
        require: true,
        default: ""
    },
    autoLoad: {
        type: Boolean,
        default: true
    }
});

const slots = useSlots();

const data = ref([]);
const loading = ref(false);

const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 15,
    showPageSize: true,
    pageSizeOptions: [15, 25, 30, 50],
    showTotal: true,
    pageChange: (current) => {
        pagination.value.current = current;
        load(current, pagination.value.pageSize);
    },
    pageSizeChange(size) {
        pagination.value.pageSize = size;
        load(pagination.value.current, size);
    },
});

const firstLoad = () => {
    if (props.autoLoad) {
        load();
    }
}

const load = () => {
    loading.value = true;
    var params = {
        pageNo: pagination.value.current,
        pageSize: pagination.value.pageSize,
        queryParam: Object.assign({}, props.params),
    };
    request(props.url, params).then(res => {
        data.value = res.records;
        pagination.value.total = res.total;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
}



firstLoad();

defineExpose({
    load,
})

</script>
<template>
    <a-card>
        <div class="toolbar">
            <slot name="toolbar"></slot>
        </div>
        <a-table v-bind="$attrs" :pagination="pagination" :loading="loading" :data="data"
            @page-change="pagination.pageChange" @page-size-change="pagination.pageSizeChange">
            <template v-for="(item, key, i) in slots" :key="i" v-slot:[key]="{ record, rowIndex, column }">
                <slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
            </template>
        </a-table>
    </a-card>
</template>